<template>
  <el-dialog :visible="visible" title="添加权限点" @close="closeFn">
    <!-- 表单区域 -->
    <el-form ref="permissionRef" :model="permissionForm" :rules="permissionRules" label-width="80px">
      <el-form-item label="权限名称" prop="name">
        <el-input v-model="permissionForm.name" />
      </el-form-item>
      <el-form-item label="权限标识" prop="code">
        <el-input v-model="permissionForm.code" />
      </el-form-item>
      <el-form-item label="权限描述">
        <el-input v-model="permissionForm.description" />
      </el-form-item>
      <el-form-item label="权限启用">
        <el-switch
          v-model="permissionForm.enVisible"
          active-value="1"
          inactive-value="0"
          active-text="启用"
          inactive-text="不启用"
        />
      </el-form-item>
    </el-form>
    <!-- 按钮区域 -->
    <template #footer>
      <div style="text-align: right;">
        <el-button id="cancelBtn" @click="$emit('update:visible')">取消</el-button>
        <el-button type="primary" @click="submit">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { addPermission, getPermissionDetail, updatePermission } from '@/api/permission'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    type: {
      type: [Number, String],
      default: ''
    },
    pid: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      permissionForm: {
        name: '', // 权限名称
        code: '', // 权限标识
        description: '', // 权限描述
        enVisible: '0', // 权限启用标识
        type: '', // 类型 区分当前是添加菜单权限点还是按钮权限点
        pid: '' // 添加到哪个节点下，权限点的父id
      },
      permissionRules: {
        name: [
          { required: true, message: '请填写权限名称', trigger: 'blur' }
        ],
        code: [
          { required: true, message: '请填写权限标识', trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    closeFn() {
      this.$emit('update:visible')
      // 清空表单和数据
      this.$refs.permissionRef.resetFields()
      this.permissionForm.enVisible = 0
      this.permissionForm.description = ''

      // !上面那样写太麻烦，直接模拟点击取消按钮，照样清空表单
      // document.getElementById('cancelBtn').click()
    },
    // 添加权限点
    submit() {
      // 兜底校验
      this.$refs.permissionRef.validate(async valid => {
        if (!valid) return
        // 调用接口
        // !在回显的时候，给permissionForm赋的值中，有id
        if (this.permissionForm.id) {
          // 编辑
          // 调用编辑权限点接口
          await updatePermission(this.permissionForm)
        } else {
          // 添加
          // 调用添加权限点接口
          await addPermission({
            ...this.permissionForm,
            type: this.type,
            pid: this.pid
          })
        }
        // 提示用户
        this.$message.success(`${this.permissionForm.id ? '编辑权限点成功' : '添加权限点成功'}`)
        // 关闭弹窗
        this.closeFn()
        // 刷新列表
        this.$emit('fetchPermissionList')
      })
    },
    // 获取详情，用于回显数据
    async fetchPermissionDetail(id) {
      const res = await getPermissionDetail(id)
      this.permissionForm = res
      // console.log(res)
    }
  }
}
</script>

<style>

</style>
